<template>
  <div class="max">
    <div class="shaixuan">
      <span class="el-icon-zoom-in chaxun">筛选查询</span>
      <el-button class="btn-one" @click="chaxun">查询结果</el-button>
      <el-button class="el-icon-arrow-up btn-two">收起查询</el-button>
    </div>
    <div class="shaixuan1">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <span>起止时间：</span>
        <el-time-picker
    is-range
    v-model="value1"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围">
  </el-time-picker>
        <el-form-item label="拜访人员：">
          <el-input v-model="formInline.user" placeholder="拜访人员"></el-input>
        </el-form-item>
        <el-form-item label="客户名字：">
          <el-input v-model="formInline.region" placeholder="客户名字"></el-input>
        </el-form-item>
      </el-form>

    </div>
    <div class="right-menu">
      <el-button class="outport" @click="Exportdut">部分导出</el-button>
      <el-button class="outport" @click="Export">全部导出</el-button>
    </div>
    <div class="table-1">
      <el-table class="table-1" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column prop="name" label="门店名称" width="120"></el-table-column>
        <el-table-column prop="contactPerson" label="拜访人员" show-overflow-tooltip></el-table-column>
        <el-table-column prop="visitType" label="拜访行为" width="120"></el-table-column>
        <el-table-column prop="signDistance" label="签到距离" width="120"></el-table-column>
        <el-table-column prop="inplaceTime" label="进店时间" width="120"></el-table-column>
        <el-table-column prop="outplaceTime" label="离店时间" width="120"></el-table-column>
        <el-table-column prop="stayplaceTime" label="停留时间" width="120"></el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { BaijieApi } from "@/http/XingweiApi/huoQueApi";
import { ExportApi, ExpordutApi,BaichaApi } from "@/http/XingweiApi/delApi";
import { fileExport } from "@/util/export";

export default {
  data() {
    return {
      tableData: [],
      total: 0,
      page: 1,
      size: 10,
      currentPage4: 5,
      startTime: '',
      endTime: '',
      formInline: {
        user: '',
        region: '',
      },
      selection: [],
      value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
    }
  },
  created() {
    this.init(this.page);
  },
  methods: {
    init(page) {
      BaijieApi(page).then((res) => {
        console.log(res);
        this.tableData = res.data.data
        // this.total=res.data.count

      })
        .catch(err => {
          console.log(err);
        })
    },
    // 查询数据
    chaxun() {
      console.log(123)
      BaichaApi(this.formInline)
        .then(res => {
          console.log(res)
          this.tableData = res.data.data
        })
        .catch(e => {
          console.log(e)
        })
    },
    onSubmit() {
      console.log('submit!');
    },
    handleEdit(index, row) {
      console.log(index, row);
      alert('123');
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.splice(index, 1);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleSelectionChange(row) {
      this.selection = row
      console.log(row)
    },
    // 导出数据
    Export() {
      console.log(1)
      ExportApi()
        .then(res => {
          console.log(res)
          fileExport(res.data, "导出")
        })
        .catch(err => {
          console.log('获取列表失败：', err);
        });
    },


    Exportdut() {
      let ids = this.selection.map(v => {
        return v.id
      })
      console.log(ids)
      ids=JSON.stringify(ids)
      ExpordutApi(ids)
        .then(res => {
          console.log(res)
          fileExport(res.data, "导出")
        })
        .catch(err => {
          console.log('获取列表失败：', err);
        });
    },
    
  },

}

</script>

<style lang="scss" scoped>
.max-hard {
  width: 100%;
  height: 50px;
  background-color: rgba(243, 243, 243);
  line-height: 50px;

  h4 {
    // padding-left: 80px;
    float: left;
    color: #666;
  }

  .btn {
    float: right;
    margin-top: 5px;
    // margin-right: 100px;
  }
}

.shaixuan {
  // margin-right: 100px;
  // margin-left: 80px;
  margin-top: 20px;
  height: 60px;
  line-height: 60px;
  background-color: rgba(243, 243, 243);
  border: 1px solid #999;

  span {
    display: inline-block;
  }

  .chaxun {
    margin-left: 20px;
  }

  .btn-one {
    float: right;
    height: 40px;
    margin-top: 10px;
    margin-right: 20px;
  }

  .btn-two {
    float: right;
    height: 40px;
    margin-top: 10px;
  }
}

.shaixuan1 {
  // margin-right: 100px;
  // margin-left: 80px;
  height: 60px;
  background-color: white;
  border: 1px solid #999;

  .demo-form-inline {
    padding-top: 10px;
    margin-left: 20px;
  }
}

.table-1 {
  // margin-left:80px;
  // margin-right:100px;
  margin-top: 20px;
  border: 1px solid #999;

}

.block {
  margin-left: 630px;
}

.shuaixuan-bt {
  // height: 60px;
  // margin-left: 80px;
  //  margin-right: 100px;
  // line-height: 60px;
  margin-top: 40px;
  background-color: #fff;
  border: 1px solid #999;

  .shai {
    margin-left: 20px;
    padding: 10px;
  }
}
</style>
